<template>
  <div class="container">
    <Navbars ></Navbars>
    <!-- 条件 -->
    <div class="querydiv" shadow="never">
      <el-form :inline="true" size="medium" label-width="70px">
        <el-form-item label="">
          <el-input v-model="listQuery.name" placeholder="机构名称"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="listQuery.code" placeholder="机构编码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn btncolor" type="primary" @click="getList">查询</el-button>
          <el-button class="btn" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="mt15">
      <el-card class="tab-card" shadow="never">
        <div slot="header" class="spacebetween disflex align-center">
          <span style="color:#676a6f;font-size:14px">登录日志列表</span>
        </div>
        <el-table :data="tableData" :header-cell-style="{background:'#e4ebfd',color:'#7690db'}" :row-class-name="tableRowClassName"
            default-expand-all row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column align="center" prop="username"  label="用户名" ></el-table-column>
            <el-table-column align="center" prop="ip" label="登录IP"></el-table-column>
            <el-table-column align="center" prop="loginTime" label="登录时间"></el-table-column>
            <el-table-column align="center" prop="status" label="登录状态"></el-table-column>
        </el-table>
      </el-card>
      <!--分页 -->
      <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.num" @pagination="getList"></Pagination>
    </div>
  </div>
</template>

<script>
import { loginlog} from '@/api/home.js'
import Pagination from '@/components/Pagination'
export default {
  name: 'user',
  components: { Pagination },
  data() {
    return {
      total: 0,
      listLoading: true,
      listQuery: {
        page:1,
        num:10,
        status:'',
        username:'',
        startTime:'',
        endTime:''
      },
      tableData: [],
    }
  },
  created() {
    // this.getorgTreeList()
    this.getList()
  },
  methods: {
    // 设置表格颜色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2==0) { return 'warning-row'}
      return '';
    },
    // 获取表格列表信息
    getList() {
      this.OrganList = []
      this.$getFlag().then(obj=>{
        this.listLoading = false
        loginlog(this.listQuery,obj.data).then(response => {
          this.tableData = response.list
          this.total = Number(response.total)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      })
    },
    //重置
    handleReset(){
      this.listQuery.pid = ""
      this.listQuery.name = ""
      this.listQuery.code = ""
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .stafftree .el-tree-node__content .el-checkbox .el-checkbox__input {
  display: none;
}
</style>
<style>
  .el-table .warning-row {
    background: #f6f9fe;
  }
</style>
